<!--
 * @Author: Dorange.Wang
 * @Date: 2021-07-14 20:02:11
 * @LastEditors: your name
 * @LastEditTime: 2021-07-20 14:12:35
 * @Description: file content
-->
<template>
  <van-field
    readonly
    clickable
    :label="instance.__config.label"
    :value="value"
    :placeholder="instance.__config.placeholder"
    right-icon="calendar-o"
    @click="handleClick"
  ></van-field>
</template>

<script>
import Dayjs from "dayjs";
import { widgetMixin } from "../mixin";
import DateTime from "@/components/dateTime/instance";
export default {
  mixins: [widgetMixin],

  data() {
    return {
      value: undefined,
    };
  },

  watch: {
    values: {
      handler: "handleValuesChange",
      immediate: true,
      deep: true,
    },
  },

  computed: {
    format() {
      // 日期格式
      const { format } = this.instance.__config;
      return format;
    },
  },

  methods: {
    handleValuesChange(values) {
      const value = values[this.field];
      if (value === "" || value === null || value === undefined) {
        this.value = value;
      }else{
        this.value = Dayjs(value).format(this.format);
      }
    },

    handleValueChange(data) {
      const value = Dayjs(data)
        .utc()
        .valueOf();
      console.log(value);
      console.log(Dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
      this.valueCallback(this.field, value);
    },

    handleClick() {
      const { value, format } = this;
      DateTime.init({
        value,
        format,
        // max,
        // min,
        // precision,
        // onChange: (value) => {
        //   console.log("onChange", value);
        //   this.value = value;
        // },
        onConfirm: (data) => {
          // console.log(value)
          this.handleValueChange(data);
        },
      });
    },
  },
};
</script>

<style></style>
